<template>
  <div class="tags-view-container">
    <div class="tags-view-wrapper">
      <span
        class="tags-view-item"
        :class="{
          active: isActive(tag),
        }"
        v-for="(tag, index) in visitedTags"
      >
        <router-link
          :key="index"
          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
          tag="span"
        >
          {{ tag.name }}
        </router-link>
        <span
          :key="index"
          class="el-icon-close"
          @click="onTagClose(tag)"
        ></span>
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useTagsViewStore } from "@/store/tagsView.ts";
import { RouteRecordRaw } from "vue-router";

const route = useRoute();
const router = useRouter();
const tagsView = useTagsViewStore();

// 从store里获取可显示的tags view
const visitedTags = computed(() => tagsView.visitedViews);

// 添加tag
const addTags = () => {
  const { name } = route;
  if (name) tagsView.addView(route);
};

// 是否是当前应该激活的tag
const isActive = (tag: RouteRecordRaw) => {
  return tag.path === route.path;
};

// 让最后一个为选中状态
const toLastView = (view: RouteRecordRaw) => {
  const lastView = visitedTags.value[visitedTags.value.length - 1];
  if (lastView) {
    router.push(lastView.fullPath as string);
  } else {
    // router.push("/dashboard");
  }
};

// 关闭当前右键的tag路由
const onTagClose = async (view: RouteRecordRaw) => {
  if (visitedTags.value.length <= 1) return;

  await tagsView.deleteView(view);

  if (isActive(view)) toLastView(view);
};

// 路由发生变化追加tags view
watch(
  () => route.path,
  () => {
    addTags();
  }
);

//最近当前router到tags view
onMounted(() => {
  addTags();
});
</script>
<style lang="scss" scoped>
.tags-view-container {
  width: 100%;
  height: 34px;
  background: #ccc;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
      height: 26px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      background: #fff;
      color: #495060;
      padding: 0 8px;
      box-sizing: border-box;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
      &:first-of-type {
        margin-left: 15px;
      }
      &:last-of-type {
        margin-right: 15px;
      }
      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        &::before {
          position: relative;
          display: inline-block;
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 5px;
          background: #fff;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.tags-view-container {
  .el-icon-close {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    left: 2px;
    border-radius: 50%;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-origin: 100% 50%;
    background: #fff;
    cursor: pointer;
    &:before {
      transform: scale(0.6);
      display: inline-block;
      vertical-align: -1px;
    }
    &:hover {
      background-color: #b4bccc;
      color: #fff;
    }
  }
}
</style>
